import React, {useEffect, useState} from "react";
import * as THREE from "three";
import  shanghaiModel  from '@/models/shanghai';//模型对象
import  duckModel  from '@/models/duck/index';//模型对象
import  factoryModel  from '@/models/factory/index';//模型对象
// @ts-ignore
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

console.log(shanghaiModel, "shanghaiModelshanghaiModel")
export default function () {
    useEffect(() => {
        //场景
        const scene = new THREE.Scene();
        scene.add(factoryModel); //模型对象添加到场景中
        scene.add(shanghaiModel); //模型对象添加到场景中
        scene.add(duckModel); //模型对象添加到场景中


        //辅助观察的坐标系
        const axesHelper = new THREE.AxesHelper(200);
        scene.add(axesHelper);


        //光源设置
        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
        directionalLight.position.set(400, 200, 300);
        scene.add(directionalLight);
        const ambient = new THREE.AmbientLight(0xffffff, 0.4);
        scene.add(ambient);


        //渲染器和相机
        const width = window.innerWidth;
        const height = window.innerHeight;
        const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
        camera.position.set(1000, 1000, -500);//根据渲染范围尺寸数量级设置相机位置
        camera.lookAt(0, 0, 0);


        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height);
        document.body.appendChild(renderer.domElement);

        //解决加载gltf格式模型颜色偏差问题
        renderer.outputEncoding = THREE.sRGBEncoding;

        // 渲染循环
        function render() {
            duckModel.position.x += 0.1;

            renderer.render(scene, camera);
            requestAnimationFrame(render);
        }
        render();


        const controls = new OrbitControls(camera, renderer.domElement);
        // controls.maxDistance = 300;
        controls.maxPolarAngle  = Math.PI/2;
        controls.update();

        // 画布跟随窗口变化
        window.onresize = function () {

            renderer.setSize(window.innerWidth, window.innerHeight);
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
        }
    }, []);

    return (
        <div>

        </div>
    )
}
